<template>
  <AppPage>
    <div flex flex-nowrap flex-col class="bg-[#253660]" style="height: 100vh; overflow-y: auto">
      <img src="@/assets/images/ai/ai_01.png" w-full />
      <div relative>
        <img src="@/assets/images/ai/ai_06.png" w-full />
        <!-- <div class="echarts-box" pt-5px pl-15px> -->
        <div
          ref="main"
          :style="{ height: (270 / 390) * bodyWidth + 'px' }"
          class="left-12% w-80%"
          absolute
          z-99
          bottom--2px
        ></div>
        <!-- </div> -->
      </div>

      <div relative>
        <img src="@/assets/images/ai/ai_08.png" w-full />
        <img src="@/assets/images/ico_trade_subscribe.png" absolute bottom-30px z-99 class="left-15% w-70%" />
      </div>
      <div relative>
        <img src="@/assets/images/ai/ai_10.png" w-full />
        <img src="@/assets/images/ico_trade_subscribe.png" absolute bottom-30px z-99 class="left-15% w-70%" />
      </div>
      <div relative>
        <img src="@/assets/images/ai/ai_11.png" w-full />
        <img src="@/assets/images/ico_trade_subscribe.png" absolute bottom-30px z-99 class="left-15% w-70%" />
      </div>
      <img src="@/assets/images/ai/ai_12.png" w-full />
      <img src="@/assets/images/ai/ai_13.png" w-full />
      <img src="@/assets/images/ai/ai_14.png" w-full />
      <img src="@/assets/images/ai/ai_15.png" w-full />
    </div>
  </AppPage>
</template>

<script setup>
import * as echarts from 'echarts'
import { useUserStore } from '@/store'
import api from '../home/api'

const main = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
const bodyWidth = ref(0)
const userStore = useUserStore()
const showTotalAssets = ref(false)
const request_profit = {
  member_id: '1912347',
  page: '1',
}

let userProfit = ref({
  dut_time: '',
  TotalAsset: '0',
  TodayProfit: '0.00',
  TodayProfitPro: '0.00%',
  PositionProfit: '0.00',
  PositionProfitPro: '0.00%',
  AccumulateProfit: '0.00',
  AccumulateProfitPro: '0.00%',
  SecurityAsset: '',
  BuyingPower: '',
  InitialAsset: '',
  SimulatedPosition: {},
  HuShen300: {},
}) //爱操盘资产信息和收益走势

onMounted(() => {
  api.getAiUserasset(request_profit).then((res) => {
    userProfit.value = res
    initChart()
  })
  bodyWidth.value = document.body.clientWidth
})

function initChart() {
  api.getAiUserasset(request_profit).then((res) => {
    userProfit.value = res
  })
  let dateTime = []
  let SimulatedPosition = []
  let HuShen300 = []
  userProfit.value.Time.forEach((element, index) => {
    dateTime.push(element.DisplayTime)
    SimulatedPosition.push(userProfit.value.SimulatedPosition[index].Line)
    HuShen300.push(userProfit.value.HuShen300[index].Line)
  })
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(main.value)
  // 指定图表的配置项和数据
  var option = {
    backgroundColor: 'rgba(0,0,0,0)',
    color: ['#F28A44', '#4D75DE'],
    legend: {
      data: ['模拟持仓', '沪深300'],
      right: '10%',
      icon: 'circle',
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: dateTime,

      axisLine: {
        onZero: false,
      },
    },

    yAxis: {
      splitLine: { show: false },
    },
    series: [
      {
        name: '模拟持仓',
        data: SimulatedPosition,
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(0,0,0,0.3)',
          shadowBlur: 10,
          shadowOffsetY: 8,
        },
        symbol: 'none',
      },
      {
        name: '沪深300',
        data: HuShen300,
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 3,
          shadowColor: 'rgba(0,0,0,0.3)',
          shadowBlur: 10,
          shadowOffsetY: 8,
        },
        symbol: 'none',
      },
    ],
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}
</script>
<style>
.echarts-background {
  background-color: transparent !important;
}
</style>
